<template>
    <div class="login-panel">
        <div :class="animation" id="owl">
            <div class="hand"></div>
            <div class="hand hand-r"></div>
            <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
            </div>
        </div>
        <el-tabs type="border-card" stretch v-model="currentTab">
            <el-tab-pane name="account">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon :size="18">
                            <IconPark :icon="User" />
                        </el-icon>
                        <span>账号登录</span>
                    </span>
                </template>
                <login-account @getfocus="getfocus" @losefocus="losefocus"/>
            </el-tab-pane>
            <el-tab-pane name="register">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon :size="18">
                            <IconPark :icon="PeoplePlusOne" />
                        </el-icon>
                        <span>注册账号</span>
                    </span>
                </template>
                <loginRegister @getfocus="getfocus" @losefocus="losefocus" @return-to="returnto"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';
import loginAccount from './login-account.vue';
import loginRegister from './login-register.vue';
import IconPark from '@components/IconPark.vue';
import { User, PeoplePlusOne } from '@icon-park/vue-next';

const animation = ref<string>("owl");

const currentTab = ref<string>("account");

const returnto = () => {
    currentTab.value = "account";
}

const getfocus = () => {
    animation.value = "owl password";
}



const losefocus = () => {
    animation.value = "owl";
}

</script>
  
<style scoped lang="less">
.login-panel {
    margin-bottom: 150px;
    width: 320px;
    margin-top: 25vh;
    position: relative;

    /* 接下来是猫头鹰的样式 */
    .owl {
        width: 211px;
        height: 108px;
        /* 背景图片 */
        background: url("../../../assets/img/owl-login.png") no-repeat;
        /* 绝对定位 */
        position: absolute;
        top: -100px;
        /* 水平居中 */
        left: 50%;
        transform: translateX(-50%);
    }

    .owl .hand {
        width: 34px;
        height: 34px;
        border-radius: 40px;
        background-color: #472d20;
        /* 绝对定位 */
        position: absolute;
        left: 12px;
        bottom: -8px;
        /* 沿Y轴缩放0.6倍（压扁） */
        transform: scaleY(0.6);
        /* 动画过渡 */
        transition: 0.3s ease-out;
    }

    .owl .hand.hand-r {
        left: 170px;
    }

    .owl.password .hand {
        transform: translateX(42px) translateY(-15px) scale(0.7);
    }

    .owl.password .hand.hand-r {
        transform: translateX(-42px) translateY(-15px) scale(0.7);
    }

    .owl .arms {
        position: absolute;
        top: 58px;
        width: 100%;
        height: 41px;
        overflow: hidden;
    }

    .owl .arms .arm {
        width: 40px;
        height: 65px;
        position: absolute;
        left: 20px;
        top: 40px;
        background: url("../../../assets/img/owl-login-arm.png") no-repeat;
        transform: rotate(-20deg);
        transition: 0.3s ease-out;
    }

    .owl .arms .arm.arm-r {
        transform: rotate(20deg) scaleX(-1);
        left: 158px;
    }

    .owl.password .arms .arm {
        transform: translateY(-40px) translateX(40px);
    }

    .owl.password .arms .arm.arm-r {
        transform: translateY(-40px) translateX(-40px) scaleX(-1);
    }

    .custom-tabs-label {
        .el-icon {
            vertical-align: middle;
        }

        span {
            vertical-align: middle;
            margin-left: 4px;
        }
    }
}</style>
  